<!-- 设备信息查询 -->
<template>
	<div class="dashboard-container">
		<div class="form-container">
			<el-form :model="form" label-width="auto" :inline="true">
				<el-form-item :label="$t('message.deviceNewsDefendQuery.pageDeviceType')">
					<el-select
						v-model="form.measurementPoint"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in measurementOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('message.deviceNewsDefendQuery.pageSubstationChange')">
					<el-select
						v-model="form.substation"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in substationOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('message.deviceNewsDefendQuery.pageDeviceChange')">
					<el-select
						v-model="form.measurementPoint"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in measurementOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button size="default" type="primary" @click="handleSearch">{{ $t('message.form.pageQuery') }}</el-button>
					<el-button size="default" type="warning" @click="handleExport">{{ $t('message.form.pageExport') }}</el-button>
					<el-button size="default" type="success" @click="handlePrint">{{ $t('message.form.pagePrint') }}</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="table-container">
			<TableCustom
				:indexIsShow="true"
				:total="total"
				:hasToolbar="false"
				:tableData="tableData"
				:tableOption="tableOption"
				:showHandleButton="true"
				:showHandleEdit="true"
				@handleEdit="handleEdit"
			/>
		</div>

		<el-dialog v-model="dialogVisible" width="50%" draggable overflow destroy-on-close>
			<el-form :model="dialogForm" :inline="true" :label-width="formLabelWidth">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="子站名称">
							<el-select v-model="dialogForm.name" :placeholder="$t('message.form.pageSelectHolder')" style="width: 200px" size="default">
								<el-option v-for="item in substationOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="设备选择">
							<el-select v-model="dialogForm.region" :placeholder="$t('message.form.pageSelectHolder')" style="width: 200px" size="default">
								<el-option v-for="item in substationOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div>
				<h1></h1>
				<el-table :data="dialogForm.gridData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
					<el-table-column property="date" label="属性名称" />
					<el-table-column property="name" label="原始值" />
					<el-table-column property="address" label="修改值" />
				</el-table>
			</div>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false">提交</el-button>
				</div>
			</template>
		</el-dialog>

		<PrintComponent ref="printComponentRef"> </PrintComponent>
	</div>
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n';
import TableCustom from '../../components/table/index.vue';
import PrintComponent from '../../components/print/index.vue';
import { onMounted, defineComponent, reactive, toRefs, computed, ref } from 'vue';

export default defineComponent({
	name: 'deviceNewsDefendQuery',

	components: { TableCustom, PrintComponent },

	setup(props, { emit }) {
		const { t } = useI18n();
		const state = reactive({
			total: 0,
			pageSize: 10,
			pageNum: 1,
			tableData: [
				{
					name: '逆变器1',
				},
			],
			form: {
				substation: '',
				device: '',
				date: '',
				radio: 1,
				measurementPoint: '',
			},
			substationOptions: [
				{ value: '1', label: '子站1' },
				{ value: '2', label: '子站2' },
				{ value: '3', label: '子站3' },
			],
			deviceOptions: [
				{ value: '1', label: '逆变器1' },
				{ value: '2', label: '逆变器2' },
				{ value: '3', label: '逆变器3' },
			],
			measurementOptions: [
				{ value: '1', label: '发电量' },
				{ value: '2', label: '电压' },
				{ value: '3', label: '电流' },
			],
			dialogVisible: false,
			formLabelWidth: '100px',
			dialogForm: {
				name: '',
				region: '',
				gridData: [
					{ date: '经度', name: '112', address: '115' },
					{ date: '纬度', name: '22', address: '25' },
					{ date: '容量', name: '1000', address: '1200' },
				],
			},
		});

		// 查询数据
		const handleSearch = () => {
			console.log('Form submitted:', state.form);
		};

		// table表头tableOption国际化
		const tableOption = computed(() => [
			{ prop: 'name', label: t('message.deviceNewsDefendQuery.pageDeviceType') },
			{ prop: 'name', label: t('message.deviceNewsDefendQuery.pageSubstationName') },
			{ prop: 'name', label: t('message.deviceNewsDefendQuery.pageDeviceName') },
			{ prop: 'name', label: t('message.deviceNewsDefendQuery.pageLongitude') },
			{ prop: 'name', label: t('message.deviceNewsDefendQuery.pageLatitude') },
			{ prop: 'name', label: t('message.deviceNewsDefendQuery.pageCapacity') },
		]);

		// 编辑操作
		const handleEdit = (row: any) => {
			console.log(row);
			state.dialogVisible = true;
		};

		// 打印操作
		const printComponentRef = ref();
		const handlePrint = () => {
			if (printComponentRef.value) {
				printComponentRef.value.printContent();
			}
		};

		// 导出数据
		const handleExport = () => {
			console.log('Exporting data...');

			// var a = document.createElement('a');
			// a.href = BASE_API + '/window/api/pdfinfo/scheduleExportPDF?eventId=' + this.eventId;
			// a.click();
		};

		onMounted(() => {});

		return {
			handleEdit,
			handlePrint,
			tableOption,
			handleSearch,
			handleExport,
			...toRefs(state),
			printComponentRef,
		};
	},
});
</script>

<style lang="scss" scoped></style>
